<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1"/>
    <title>一家镖局</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header class="fixed">
    <div class="header-wrap" style="height: 2.3rem;">
        <div class="header-l1jia">
            <a href="#">
                <img class="vm" src="images/1jia-logo.png" height="22" alt="">
            </a>
        </div>
        <div class="header-r">
            <a href="#"><img class="vm" src="images/user-ico.png" width="16" alt=""></a>
        </div>
    </div>
</header>


<div class="nctouch-home-top fixed-Width" style="margin-top:2rem;">
    <!--轮播 star-->
    <div class="new-ct main">
        <div style="overflow: hidden;" class="banner scroll-wrapper" id="idContainer2"
             ontouchstart="touchStart(event)" ontouchmove="touchMove(event);" ontouchend="touchEnd(event);">
            <ul class="scroller" style="left:0;width:300%; position: relative;"
                id="idSlider">
                <li style="width: 320px;">
                    <a href="#"
                       name="6">
                        <img src="http://placehold.it/680x340">
                    </a>
                </li>
                <li style="width: 640px;">
                    <a href="#"
                       name="6">
                        <img src="http://placehold.it/680x340">
                    </a>
                </li>
                <li style="width: 640px;">
                    <a href="#"
                       name="6">
                        <img src="http://placehold.it/680x340">
                    </a>
                </li>
            </ul>
            <ul class="new-banner-num new-tbl-type" id="idNum">
            </ul>
        </div>
    </div>
    <!--轮播 end-->
</div>

<div class="nctouch-home-nav fixed-Width">
    <ul>
        <li><a href="tmpl/product_first_categroy.html"><span><i></i></span>
            <p>我要寄件</p>
        </a></li>
        <li><a href="tmpl/cart_list.html"><span><i></i></span>
            <p>快件查询</p>
        </a></li>
        <li><a href="tmpl/member/member.html"><span><i></i></span>
            <p>运镖价格</p>
        </a></li>
    </ul>
</div>

<div class="nctouch-home-block">
    <p class="tc c000 f_7rem lh44">业务介绍</p>
    <div class="bgwh">
        <a href="" class="dib pct100">
            <div class="tc pt20 pb20 dib pct100">
                <div class="dib mt_6">
                    <div class="dib c000 l pl20">
                        <img class="" src="images/theday-ico.png" alt="" width="50">
                        <p class="f_7rem">当日达</p>
                    </div>
                    <div class="dib c000 l f_5rem pl20 lh24 pt10 tl w9_1rem">
                        <p>当天下达订单(8:30-16:00)</p>
                        <p>当日送达，超过16:00下达订单次日达</p>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <div class="bgwh mt_5 mb30">
        <a href="" class="dib pct100">
            <div class="tc pt20 pb20 dib pct100">
                <div class="dib mt_6">
                    <div class="dib c000 l pl20">
                        <img class="" src="images/Avelocity.png" alt="" width="50">
                        <p class="f_7rem">极速达</p>
                    </div>
                    <div class="dib c000 l f_5rem pl20 lh20 tl w9_1rem">
                        <p>30分钟内响应订单</p>
                        <p>五公里内60分钟送达</p>
                        <p>每增加五公里增加半小时</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>


<!--返回顶部-->
<div id="backtop" class="fix-block-r hide"><a href="#" class="gotop-btn gotop"><i></i></a></div>

<script type="text/javascript" src="js/zepto.min.js"></script>


<script>
    //活动轮播图
    var picCount = $(".scroller>li").length;
    $(".scroller").css('width', 100 * picCount + "%");
    $(".pic-num1").css("width", (picCount * 30) + "px");
    var sl = picCount, sw;
    var _startX, _startY, index = 0, moveX, moveY, _endX, _endY, idSliderLeft = $("#idSlider").css('left'), auto = false, play = true;
    var nums = [];
    //插入数字
    for (var i = 0,
                 n = picCount - 1; i <= n; i++) {
        var li = document.createElement("li");
        nums[i] = document.getElementById("idNum").appendChild(li);
    }
    // 重新设置浮动
    $("#idSlider").css("position", "relative");
    function touchStart(event) {
        _startX = event.touches[0].clientX;
        _startY = event.touches[0].clientY;
    }
    function touchMove(event) {
        var touch = event.touches[0];
        _endX = event.touches[0].clientX;
        _endY = event.touches[0].clientY;
        moveX = Math.abs(touch.clientX - _startX);
        moveY = Math.abs(touch.clientY - _startY);
        if (moveY > moveX) {
            return;
        }
        event.preventDefault();
    }
    //触屏结束事件
    function touchEnd(event) {
        var _absX = Math.abs(_endX - _startX);
        var lastX = parseInt($('#idSlider').css('left'));
        if (_startX > _endX) {
            Stop();
            $('#idSlider').css('left', lastX - sw);
            index++;
        } else {
            Stop();
            $('#idSlider').css('left', lastX + sw);
            index--;
        }
        if (index < 0) {
            index = sl - 1;
            $('#idSlider').css('left', -index * sw);
        }
        if (index > sl - 1) {
            index = 0;
            $('#idSlider').css('left', 0);
        }
        $(".new-banner-num li").addClass("new-tbl-cell").eq(index).addClass("on").siblings().removeClass('on');
        _startX = _endX;
        if (sl > 1) {
            autoPlay();
        }
        event.preventDefault();
    }
    var num = 0;
    var resetScrollEle = function () {
        num++;
        var slider2Li = $("#idSlider li");
        var lastX = parseInt($('#idSlider').css('left'));
        slider2Li.css("width", $(".scroll-wrapper").width() + "px");
        sw = slider2Li.width();
        $("#idSlider").css('left', -index * sw);
        $(".new-banner-num li").addClass("new-tbl-cell").eq(index).addClass("on").siblings().removeClass('on');
    }

    window.addEventListener("resize",
            function () {
                resetScrollEle();
            });
    window.addEventListener("orientationchange",
            function () {
                resetScrollEle();
            })
    resetScrollEle();
    function autoPlay() {
        window.clearTimeout(this.timer);
        if (auto) {
            var lastX = parseInt($('#idSlider').css('left'));
            $('#idSlider').css('left', lastX - sw);
            index++;
            if (index < 0) {
                index = sl - 1;
                $('#idSlider').css('left', -index * sw);
            }
            if (index > sl - 1) {
                index = 0;
                $('#idSlider').css('left', 0);
            }
            $(".new-banner-num li").addClass("new-tbl-cell").eq(index).addClass("on").siblings().removeClass('on');
        }
        this.timer = window.setTimeout(function () {
            auto = true;
            autoPlay()
        }, 3000)
    }
    function Stop() {
        window.clearTimeout(this.timer);
        auto = false;
    }
    if (play) {
        if (sl > 1) {
            autoPlay();
        }
    }
</script>
<!--轮播 end-->
</body>
</html>
